<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>设置</title>
    <link rel="stylesheet" type="text/css" href="../../css/api.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/style.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/member.css"/>
    <script type="text/javascript" src="../../script/jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="../../script/mobile.js"></script>
    <script type="text/javascript">
        window['adaptive'].desinWidth = 750;
        window['adaptive'].baseFont = 28;
        window['adaptive'].maxWidth = 750;
        window['adaptive'].init();
    </script>
    <style type="text/css">
        .fiexdBox-right{
            position: fixed;
            top: 0;
            right: 0;
            overflow: hidden;
            overflow-y: scroll;
            z-index: 888888;
            background: #fff;
            height: 100%;
            width: 0.66rem;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .fiexdBox-right ul li a{
            display: block;
            width: 0.66rem;
            text-align: center;
            line-height: .3rem;
            font-size: .22rem;
            color: #504f4f;
            margin-bottom: 0.1rem;
        }
    </style>
</head>

<body>
<div id="header" style="height: 0.9rem; background: #fff; position: fixed; top: 0;left: 0; width: 100%; z-index: 99">
    <header class="header header-shadow">
        <div class="header-left">
            <div tapmode onclick="comeBack();" class="nav-left"><img class="icon-back" src="../../icon/icon-back.png"/>
            </div>
        </div>
        <h2>选择省市</h2>
    </header>
</div>
<div class="header-h" style="padding-top: 1.5rem;"></div>
<section class="html_section pr30 pl30">
    <ul class="setting_option f30 pr20" id="result">
        <!--<li class="between line_center c-666">
            <div>A</div>
        </li>
        <li tapmode class="between line_center c-666" onclick="choose()">
            <div>重庆</div>
            <img class="ml30 arr_move" src='../../icon/move.png'/>
        </li>
        <li class="between line_center c-666">
            <div>A</div>
        </li>
        <li tapmode class="between line_center c-666" onclick="choose()">
            <div>重庆</div>
            <img class="ml30 arr_move" src='../../icon/move.png'/>
        </li>
        <li class="between line_center c-666">
            <div>A</div>
        </li>
        <li tapmode class="between line_center c-666" onclick="choose()">
            <div>重庆</div>
            <img class="ml30 arr_move" src='../../icon/move.png'/>
        </li>-->
    </ul>
</section>
<div class="fiexdBox-right">
    <ul>
        <li>
            <a href="#A">A</a>
        </li>
        <li>
            <a href="#B">B</a>
        </li>
        <li>
            <a href="#C">C</a>
        </li>
        <li>
            <a href="#D">D</a>
        </li>
        <li>
            <a href="#E">E</a>
        </li>
        <li>
            <a href="#F">F</a>
        </li>
        <li>
            <a href="#G">G</a>
        </li>
        <li>
            <a href="#H">H</a>
        </li>
        <li>
            <a href="#I">I</a>
        </li>
        <li>
            <a href="#J">J</a>
        </li>
        <li>
            <a href="#K">K</a>
        </li>
        <li>
            <a href="#L">L</a>
        </li>
        <li>
            <a href="#M">M</a>
        </li>
        <li>
            <a href="#N">N</a>
        </li>
        <li>
            <a href="#O">O</a>
        </li>
        <li>
            <a href="#P">P</a>
        </li>
        <li>
            <a href="#Q">Q</a>
        </li>
        <li>
            <a href="#R">R</a>
        </li>
        <li>
            <a href="#S">S</a>
        </li>
        <li>
            <a href="#T">T</a>
        </li>
        <li>
            <a href="#U">U</a>
        </li>
        <li>
            <a href="#V">V</a>
        </li>
        <li>
            <a href="#W">W</a>
        </li>
        <li>
            <a href="#X">X</a>
        </li>
        <li>
            <a href="#Y">Y</a>
        </li>
        <li>
            <a href="#Z">Z</a>
        </li>
    </ul>
</div>

</body>

</html>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/common.js"></script>
<script type="text/javascript">
    var path, city_id;
    apiready = function () {
        setFixStatusBar(); //设置状态栏
        keybackListener()
        path = api.pageParam.path;
        getData();
    };

    $(function () {
        $(".fiexdBox-right").on('click','a',function(){
            var id = $(this).attr('href');
            if(isDefine($(id).offset())){
                var scroll_offset = $(id).offset().top - $('.header-h').outerHeight(true);
                $("body,html").animate({
                    scrollTop: scroll_offset //让body的scrollTop等于pos的top，就实现了滚动
                },500);
            }

        });
    })

    function getData() {
        var param = {};
        getAjax(Interface.get_city, param, function (res) {
            var result = res.data;
            var html = '';
            if (result) {
                $.each(result,function (i, item) {

                    html +='<li class="between line_center c-666" id="'+item.letter+'"><div>'+item.letter+'</div></li>';

                    $.each(item.data,function (j, jtem) {

                        html +='<li tapmode class="between line_center c-666 pr20" onclick=\'choose(' +jtem.id+')\'>'
                            +'<div>'+jtem.city+'</div>'
                            +'<img class="ml30 arr_move" src=\'../../icon/move.png\'/>'
                            +'</li>';
                    })

                })

            }
            $("#result").html(html);
        }, function (error) {
            console.log(JSON.stringify(error));
        })
    }

    function choose(id) {
        var param = {id: id,path: path}
        commonUrl("../login/select_choose_city",param)
    }


</script>
